<script setup lang="ts">
import { onMounted, ref, shallowRef, watchEffect } from "vue";
import { RangePicker, Select } from "ant-design-vue";
import * as echarts from "echarts";
import { storeToRefs } from "pinia";
import { overview } from "@/services/green-wave";
import { fitChartSize, px2vw } from "@/utils/responsible";
import { useGreenWaveStore } from "@/store/green-wave";
import { DATE_FORMAT, DATE_TYPE_OPTIONS } from "@/const";

const chartRef1 = ref(null);
const chartRef2 = ref(null);
const chart1 = ref<echarts.ECharts>();
const chart2 = ref<echarts.ECharts>();
const titleRef = ref<HTMLElement>();

const store = useGreenWaveStore();
const { weekRange, dateType } = storeToRefs(store);

const data = shallowRef();
const parseInt = (num: number) => {
    return parseInt(Math.round(num));
};

onMounted(async () => {
    chart1.value = echarts.init(chartRef1.value);
    chart2.value = echarts.init(chartRef2.value);
});

watchEffect(async () => {
    if (weekRange.value?.length !== 2) {
        return;
    }
    const [start, end] = weekRange.value;
    const result = (await overview({
        startDate: start?.format(DATE_FORMAT),
        endDate: end?.format(DATE_FORMAT),
    })) as any;
    data.value = result;
    if (chart1.value) {
        chart1.value.setOption({
            tooltip: { trigger: "item" },
            grid: { width: "50%" },
            legend: {
                top: "center",
                right: "5%",
                width: "5%",
                orient: "vertical",
                icon: "circle",
                itemWidth: fitChartSize(6),
                textStyle: { color: "#fff", fontSize: fitChartSize(12) },
            },
            series: [
                {
                    type: "pie",
                    radius: ["80%", "90%"],
                    center: ["30%", "50%"],
                    avoidLabelOverlap: false,
                    labelLine: { show: false },
                    hoverAnimation: false,
                    data: [
                        {
                            value: 100,
                            itemStyle: {
                                color: "#032136",
                                shadowBlur: 6,
                                shadowColor: "#0FB2FF",
                            },
                        },
                    ],
                },

                {
                    type: "pie",
                    radius: ["60%", "80%"],
                    center: ["30%", "50%"],
                    avoidLabelOverlap: false,
                    label: { show: false, position: "center" },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: fitChartSize(24),
                            formatter: "{c}",
                            color: "inherit",
                        },
                        scaleSize: 2,
                    },
                    labelLine: { show: false },
                    data: [
                        {
                            value: result?.greenWaveOverview?.running,
                            name: "运行总数",
                            itemStyle: { color: "#00D0E2" },
                        },
                        {
                            value: result?.greenWaveOverview?.notRunning,
                            name: "未运行数",
                            itemStyle: { color: "#FF4D4D" },
                        },
                    ],
                },
            ],
        });
        const chart = chart1.value;
        chart1.value.on("mouseover", (e) => {
            chart.dispatchAction({
                type: "highlight",
                seriesIndex: e.seriesIndex,
                dataIndex: e.dataIndex,
            });

            if (e.seriesIndex !== 1 || e.dataIndex !== 0) {
                chart.dispatchAction({
                    type: "downplay",
                    seriesIndex: 1,
                    dataIndex: 0,
                });
            }
        });
        chart1.value.on("mouseout", (e) => {
            chart.dispatchAction({
                type: "downplay",
                seriesIndex: e.seriesIndex,
                dataIndex: e.dataIndex,
            });
        });

        chart1.value.dispatchAction({
            type: "highlight",
            seriesIndex: 1,
            dataIndex: 0,
        });
    }
    if (chart2.value) {
        chart2.value.setOption({
            tooltip: { trigger: "item" },
            legend: {
                top: "center",
                grid: { width: "50%" },
                right: "-8%",
                width: "40%",
                orient: "vertical",
                icon: "circle",
                itemWidth: fitChartSize(6),
                textStyle: { color: "#fff", fontSize: fitChartSize(12) },
            },
            series: [
                {
                    type: "pie",
                    radius: ["80%", "90%"],
                    center: ["30%", "50%"],
                    avoidLabelOverlap: false,
                    labelLine: { show: false },
                    hoverAnimation: false,
                    data: [
                        {
                            value: 100,
                            itemStyle: {
                                color: "#032136",
                                shadowBlur: 6,
                                shadowColor: "#0FB2FF",
                            },
                        },
                    ],
                },
                {
                    type: "pie",
                    radius: ["60%", "80%"],
                    center: ["30%", "50%"],
                    avoidLabelOverlap: false,
                    label: { show: false, position: "center" },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: fitChartSize(24),
                            formatter: "{c}",
                            color: "inherit",
                        },
                        scaleSize: 2,
                    },
                    labelLine: { show: false },
                    data: [
                        {
                            value: result?.runningOverview?.good,
                            name: "通过率高",
                            itemStyle: { color: "#5AD8A6" },
                        },
                        {
                            value: result?.runningOverview?.commonly,
                            name: "通行率中",
                            itemStyle: { color: "#F6BD16" },
                        },
                        {
                            value: result?.runningOverview?.low,
                            name: "通过率低",
                            itemStyle: { color: "#FF4D4D" },
                        },
                    ],
                },
            ],
        });
        const chart = chart2.value;
        chart2.value.on("mouseover", (e) => {
            chart.dispatchAction({
                type: "highlight",
                seriesIndex: e.seriesIndex,
                dataIndex: e.dataIndex,
            });

            if (e.seriesIndex !== 1 || e.dataIndex !== 0) {
                chart.dispatchAction({
                    type: "downplay",
                    seriesIndex: 1,
                    dataIndex: 0,
                });
            }
        });
        chart2.value.on("mouseout", (e) => {
            chart.dispatchAction({
                type: "downplay",
                seriesIndex: e.seriesIndex,
                dataIndex: e.dataIndex,
            });
        });

        chart2.value.dispatchAction({
            type: "highlight",
            seriesIndex: 1,
            dataIndex: 0,
        });
    }
});

function getContainer(_: HTMLElement) {
    return titleRef.value as HTMLElement;
}
</script>

<template>
    <div class="outline">
        <h3 ref="titleRef">
            <!-- <el-date-picker :teleported="false" class="date-picker" popper-class="date-picker-popper" v-model="range" type="datetimerange" range-separator="~" /> -->
            <RangePicker
                v-model:value="weekRange"
                :allow-clear="false"
                separator="~"
                class="date-picker"
                popup-class-name="date-picker-popper"
                picker="week"
                size="small"
                :get-popup-container="getContainer"
                @change="store.updateWeekRange"
            >
                <template v-slot:suffixIcon></template>
            </RangePicker>
            <Select
                v-model:value="dateType"
                :options="DATE_TYPE_OPTIONS"
                size="small"
                class="select"
                :get-popup-container="getContainer"
                @change="store.updateDateType"
            />
        </h3>
        <div class="chart-container" :style="{ height: px2vw(120) }">
            <div class="chart" ref="chartRef1"></div>
            <div class="chart" ref="chartRef2"></div>
        </div>
        <ul class="list">
            <li>
                <span class="label">平均通过率</span>
                <span class="valueWrap">
                    <span class="value">{{
                        parseInt(
                            data?.greenWaveAvgPassingRate?.currentIndex || 0
                        )
                    }}</span>
                    <i>%</i>
                </span>
                <span
                    v-if="data?.greenWaveAvgPassingRate?.historyCompare"
                    class="comparison"
                    :class="
                        data?.greenWaveAvgPassingRate?.historyCompare < 0
                            ? 'down'
                            : 'up'
                    "
                >
                    <span>较上周</span>
                    <span class="percent"
                        >{{
                            data?.greenWaveAvgPassingRate?.historyCompare < 0
                                ? "↓"
                                : "↑"
                        }}{{
                            parseInt(
                                data?.greenWaveAvgPassingRate?.historyCompare ||
                                    0
                            )
                        }}%</span
                    >
                </span>
            </li>
            <li>
                <span class="label">平均速度</span>
                <span class="valueWrap">
                    <span class="value">{{
                        parseInt(data?.greenWaveAvgSpeed?.currentIndex || 0)
                    }}</span>
                    <i>km/h</i>
                </span>
                <span
                    v-if="data?.greenWaveAvgSpeed?.historyCompare"
                    class="comparison"
                    :class="
                        data?.greenWaveAvgSpeed?.historyCompare < 0
                            ? 'down'
                            : 'up'
                    "
                >
                    <span>较上周</span>
                    <span
                        >{{
                            data?.greenWaveAvgSpeed?.historyCompare < 0
                                ? "↓"
                                : "↑"
                        }}{{
                            parseInt(data?.greenWaveAvgSpeed?.historyCompare)
                        }}%</span
                    >
                </span>
            </li>
            <li>
                <span class="label">拥堵指数</span>
                <span class="valueWrap">
                    <span class="value">{{
                        data?.greenWaveCongestion?.currentIndex || 0
                    }}</span>
                </span>
                <span
                    v-if="data?.greenWaveCongestion?.historyCompare"
                    class="comparison"
                    :class="
                        data?.greenWaveCongestion?.historyCompare < 0
                            ? 'up'
                            : 'down'
                    "
                >
                    <span>较上周</span>
                    <span
                        >{{
                            data?.greenWaveCongestion?.historyCompare < 0
                                ? "↓"
                                : "↑"
                        }}{{ data?.greenWaveCongestion?.historyCompare }}%</span
                    >
                </span>
            </li>
        </ul>
    </div>
</template>

<style lang="scss" scoped>
.outline {
    margin-bottom: 16px;
    > h3 {
        $selectHeight: 30px;
        display: flex;
        align-items: center;
        justify-content: end;
        height: 38px;
        margin-bottom: 20px;
        text-align: right;
        background-image: url(../../../assets/bg_title_green_wave_outline.png);
        background-size: cover;

        :deep(.date-picker) {
            --el-date-editor-width: 166px;
            --el-input-height: 24px;
            --el-font-size-base: 12px;
            --el-input-bg-color: #012039;
            --el-datepicker-inrange-bg-color: #012039;
            --el-datepicker-inrange-hover-bg-color: #012039;

            width: 166px;
            height: $selectHeight;
            padding: 0 10px 0 6px;
            background: #012039;
            color: #fff;
            border-color: #5978a4;
            &.ant-picker-focused {
                box-shadow: none;
            }

            input {
                font-size: 12px;
                text-align: center;
                color: #fff;
            }
            .ant-picker-clear {
                background: none;
            }
            .ant-picker-suffix {
                color: #fff;
            }
            .ant-picker-active-bar {
                display: none;
            }
            .ant-picker-range-separator {
                padding: 0;
                font-size: 12px;
            }
            .ant-picker-clear {
                color: #fff;
            }

            .el-range__icon {
                margin-right: 10px;
            }
        }

        :deep(.date-picker-popper) {
            --el-input-text-color: #fff;
            --el-bg-color-overlay: #012039;

            .el-date-range-picker__editor {
                --el-input-bg-color: #012039;
            }
            .el-date-table-cell {
                --el-datepicker-inrange-bg-color: #012039;
                --el-datepicker-inrange-hover-bg-color: #012039;
            }
        }

        :deep(.select) {
            width: 74px;
            margin-left: 10px;
            font-size: 12px;
            .ant-select-selector {
                align-items: center;
                height: $selectHeight;
                font-size: 12px;
                border-color: #5978a4;
            }
            .ant-select-arrow {
                color: #fff;
                font-size: 8px;
            }
            .ant-select-selection-item {
                text-align: left;
                line-height: $selectHeight;
                padding-inline-end: 12px !important;
            }
        }

        :deep(.ant-select-item) {
            font-size: 12px;
            padding: 2px 4px;
            min-height: unset;

            .ant-select-item-option-content {
                flex: unset;
            }
            &.ant-select-item-option-selected:not(
                    .ant-select-item-option-disabled
                ) {
                color: #012039;
                background: #0fb2ff;
            }
        }
    }

    .chart-container {
        display: flex;
        .chart {
            flex: 1;
            height: 100%;
        }
    }

    ul.list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 12px;

        li {
            list-style: none;
            width: 100px;
            height: 146px;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 60px;
            font-size: 12px;
            line-height: 14px;
            font-weight: 400;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            &:nth-child(1) {
                background-image: url(@/assets/bg_icon_pass_rate.png);
            }
            &:nth-child(2) {
                background-image: url(@/assets/bg_icon_avg_speed.png);
            }
            &:nth-child(3) {
                background-image: url(@/assets/bg_icon_congestion_index.png);
            }

            .label {
                color: #bae7ff;
            }

            .valueWrap {
                margin-top: 3px;
                .value {
                    font-size: 24px;
                    font-family: CustomFont;
                    line-height: 28px;
                    color: #63fbf6;
                }
            }
            .comparison {
                color: #c5c5c5;
                margin-top: 3px;
                &.down {
                    .percent {
                        color: #f75a5a;
                    }
                }
                &.up {
                    .percent {
                        color: #0af5b4;
                    }
                }
            }
        }
        li + li {
            margin-left: 30px;
        }
    }
}
</style>
